<template>
  <Modal v-model="show" v-bind:title="modalTitle" @on-cancel="cancel" :closable="false">
    <Form
      ref="meetingForm"
      :model="meetingInfo"
      :label-width="95"
      label-position="right"
      :rules="meetingRules"
    >
      <Row type="flex" justify="center" style="margin-bottom: 5px">
        <div style="margin-bottom: 10px">
          <a href="javascript:void(0)" class="staff-file" ref="meet_logo">
            <input
              type="file"
              accept="image/png, image/jpeg, image/jpg"
              @change="preview"
              title="  "
            >
          </a>
        </div>
      </Row>
      <FormItem label="会议名称" prop="meeting_name" ref="meetingName">
        <Input v-model.trim="meetingInfo.meet_name" placeholder :maxlength="50"/>
      </FormItem>
      <FormItem label="限制人数" prop="user_limit" ref="userLimit">
        <InputNumber
          v-model.trim="meetingInfo.user_limit"
          placeholder="限制人数，0表示不限制"
          :min="0"
          :max="99999999"
        />
      </FormItem>

      <FormItem label="会议开始时间" prop="meeting_time_start" ref="meetingTimeSpan">
        <Row>
          <Col span="11">
            <DatePicker
              id="date_start"
              placeholder
              v-model="meetingInfo.date_start.date"
              @on-open-change="onTimeStartChange"
              :options="optionsDateNow"
            ></DatePicker>
          </Col>
          <Col span="1" style="text-align: center">-</Col>
          <Col span="11">
            <TimePicker
              id="time_start"
              format="HH:mm"
              placeholder
              v-model="meetingInfo.date_start.time"
              @on-open-change="onTimeStartChange"
            ></TimePicker>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="会议结束时间" prop="meeting_time_end" ref="meetingTimeEnd">
        <Row>
          <Col span="11">
            <DatePicker
              id="date_end"
              placeholder
              v-model="meetingInfo.date_end.date"
              :options="optionsDateNow"
            ></DatePicker>
          </Col>
          <Col span="1" style="text-align: center">-</Col>
          <Col span="11">
            <TimePicker
              id="time_end"
              format="HH:mm"
              placeholder
              v-model="meetingInfo.date_end.time"
            ></TimePicker>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="签到截止时间" prop="meeting_report_end" ref="reportEnd">
        <Row>
          <Col span="11">
            <DatePicker
              id="report_end"
              placeholder
              v-model="meetingInfo.report_end.date"
              :options="optionsDateNow"
            ></DatePicker>
          </Col>
          <Col span="1" style="text-align: center">-</Col>
          <Col span="11">
            <TimePicker
              id="report_end_time"
              placeholder
              format="HH:mm"
              v-model="meetingInfo.report_end.time"
            ></TimePicker>
          </Col>
        </Row>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="text" size="large" @click="show = false">取消</Button>
      <Button type="primary" @click="handleSubmit">提交</Button>
    </div>
  </Modal>
</template>

<script>
import Tool from "@/libs/util";
import ME from "../../../controllers/meeting";
import DateUtils from "../../../../node_modules/iview/src/utils/date";
import pic from "../../../images/upload.png";
import ImageUtils from "@/libs/image.js";

export default {
  name: "add-meeting",
  props: {},
  created() {},
  computed: {},
  data() {
    return {
      type: "",
      show: false,
      edit_flag: false,
      modalTitle: "新建会议",

      meetingInfo: {
        _id: "",
        user_limit: 500,
        meet_name: "",
        date_start: {
          date: "",
          time: ""
        },
        date_end: {
          date: "",
          time: ""
        },
        report_end: {
          date: "",
          time: ""
        },
        logo: ""
      },
      meetingRules: {
        meet_name: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        user_limit: [
          {
            required: true,
            message: "停留时间不能为空",
            trigger: "blur",
            type: "number",
            transform(value) {
              return Number(value);
            },
            validator(rule, value, callback) {
              if (value < 0 || value > 99999999) {
                callback(new Error("请输入[0, 600]内的整数"));
              } else {
                callback();
              }
            }
          }
        ]
      },
      optionsDateNow: {
        disabledDate(date) {
          return date && date.valueOf() < new Date() - 86400000;
        }
      },
      optionsDateEnd: {
        disabledDate(date) {
          if (!date) return false;

          if (
            date.valueOf() <
            this.meetingInfo.date_start.date.valueOf() - 86400000
          )
            return true;
          return false;
        }
      }
    };
  },
  methods: {
    preview(e) {
      let file = e.target.files[0];
      if (!file) return;
      ImageUtils.compress(
        file,
        {
          compress: {
            width: 480,
            height: 480,
            quality: 0.8
          },
          type: "file"
        },
        (res, w, h) => {
          if (res) {
            let reader = new FileReader();
            reader.onload = () => {
              this.$refs["meet_logo"].style.backgroundImage =
                "url('" + reader.result + "')";
              this.meetingInfo.logo = reader.result.split(",")[1];
              reader.onload = null;
            };
            reader.readAsDataURL(res);
          } else {
            this.$Message.error("图片过大，请更换");
          }
        }
      );
    },
    handleSubmit() {
      this.$refs["meetingForm"].validate().then(validate => {
        if (validate && this.checkTimes()) {
          this.submit();
        } else {
          this.$Message.error("请检查表单");
        }
      });
    },
    submit() {
      let config = {
        user_limit: 500,
        meet_name: "",
        date_start: "",
        date_end: "",
        report_end: "",
        meet_logo: ""
      };
      config.user_limit = this.meetingInfo.user_limit;
      config.meet_name = this.meetingInfo.meet_name;
      config.date_start =
        DateUtils.format(this.meetingInfo.date_start.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.date_start.time, "HH:mm:ss");

      config.date_end =
        DateUtils.format(this.meetingInfo.date_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.date_end.time, "HH:mm:ss");

      config.report_end =
        DateUtils.format(this.meetingInfo.report_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.report_end.time, "HH:mm:ss");
      config.meet_logo = this.meetingInfo.logo;
      config.format = "jpeg";

      if (this.edit_flag) {
        config.meet_id = this.meetingInfo._id;
        ME.update(config).then(res => {
          this.show = false;
          this.$Message.success("更新成功");
          res.data.date_end = res.data.date_end || config.date_end;
          res.data.meet_name = res.data.meet_name || config.meet_name;
          this.$emit("updated", {
            edit_flag: this.edit_flag,
            meet: res.data
          });
        });
      } else {
        ME.add(config).then(res => {
          this.show = false;
          this.$Message.success("添加成功");
          res.data.date_end = res.data.date_end || config.date_end;
          res.data.meet_name = res.data.meet_name || config.meet_name;
          this.$emit("updated", {
            edit_flag: this.edit_flag,
            meet: res.data
          });
        });
      }
    },
    onTimeStartChange(open) {
      if (open) return;
      let date_start =
        DateUtils.format(this.meetingInfo.date_start.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.date_start.time, "HH:mm:ss");
      let date_end =
        DateUtils.format(this.meetingInfo.date_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.date_end.time, "HH:mm:ss");
      let report_end =
        DateUtils.format(this.meetingInfo.report_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.report_end.time, "HH:mm:ss");
      if (date_end < date_start) {
        this.meetingInfo.date_end.date = this.meetingInfo.date_start.date;
        this.meetingInfo.date_end.time = this.meetingInfo.date_start.time;
      }
      if (report_end < date_start) {
        this.meetingInfo.report_end.date = this.meetingInfo.date_start.date;
        this.meetingInfo.report_end.time = this.meetingInfo.date_start.time;
      }
    },
    cancel() {},
    checkTimes() {
      let config = {};
      config.date_start =
        DateUtils.format(this.meetingInfo.date_start.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.date_start.time, "HH:mm:ss");

      config.date_end =
        DateUtils.format(this.meetingInfo.date_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.date_end.time, "HH:mm:ss");

      config.report_end =
        DateUtils.format(this.meetingInfo.report_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.meetingInfo.report_end.time, "HH:mm:ss");
      if (config.date_end <= config.date_start) {
        return false;
      }
      if (config.report_end < config.date_start) {
        return false;
      }
      return true;
    },
    showAsUpdate(meeting) {
      this.meetingInfo._id = meeting._id;
      this.meetingInfo.meet_name = meeting.meet_name;
      this.meetingInfo.user_limit = meeting.user_limit;
      this.meetingInfo.logo = meeting.meet_logo;
      let img = meeting.meet_logo ? meeting.meet_logo : pic;
      this.$refs["meet_logo"].style.backgroundImage = "url(" + img + ")";
      this.meetingInfo.logo = "";
      if (meeting.date_start) {
        this.meetingInfo.date_start.date = DateUtils.parse(
          meeting.date_start,
          "yyyy-MM-dd HH:mm:ss"
        );
        this.meetingInfo.date_start.time = DateUtils.parse(
          meeting.date_start,
          "yyyy-MM-dd HH:mm:ss"
        );
      } else {
        this.meetingInfo.date_start.date = new Date();
        this.meetingInfo.date_start.time = new Date();
      }
      if (meeting.date_end) {
        this.meetingInfo.date_end.date = DateUtils.parse(
          meeting.date_end,
          "yyyy-MM-dd HH:mm:ss"
        );
        this.meetingInfo.date_end.time = DateUtils.parse(
          meeting.date_end,
          "yyyy-MM-dd HH:mm:ss"
        );
      } else {
        this.meetingInfo.date_end.date = new Date();
        this.meetingInfo.date_end.time = new Date();
      }
      if (meeting.report_end) {
        this.meetingInfo.report_end.date = DateUtils.parse(
          meeting.report_end,
          "yyyy-MM-dd HH:mm:ss"
        );
        this.meetingInfo.report_end.time = DateUtils.parse(
          meeting.report_end,
          "yyyy-MM-dd HH:mm:ss"
        );
      } else {
        this.meetingInfo.report_end.date = new Date();
        this.meetingInfo.report_end.time = new Date();
      }
      this.show = true;
      this.edit_flag = true;
      this.modalTitle = "编辑会议";
    },
    showAsAdd(type) {
      this.edit_flag = false;
      this.show = true;
      let date = new Date();
      this.meetingInfo.date_start.date = date;

      this.meetingInfo.date_start.time = new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDay(),
        9,
        0,
        0,
        0
      );
      this.meetingInfo.date_end.date = date;
      this.meetingInfo.date_end.time = new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDay(),
        18,
        0,
        0,
        0
      );
      this.meetingInfo.report_end.date = date;
      this.meetingInfo.report_end.time = new Date(
        date.getFullYear(),
        date.getMonth(),
        date.getDay(),
        18,
        0,
        0,
        0
      );
      this.meetingInfo.logo = "";
      this.modalTitle = "新建会议";
    }
  }
};
</script>